<template>
  <div class="contain-body hdda-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form"
               inline
               :model="form"
               label-width="75px">
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">姓名：</div>
          <el-input v-model="form.xms"></el-input>
        </el-form-item>

        <el-form-item>
          <div class="d-ib font-table"
               slot="label">证件号码：</div>
          <el-input v-model="form.zjhms"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search"
                     class="button-search"
                     @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
        <div class="pos-a" style="right: 0">
          <el-button @click="openOptions('','add')" type="primary" icon="el-icon-plus">
            新增
          </el-button>
        </div>
      </div>
      <CustomTable :columns="columns"
                   :table-data="tableData"
                   :pagination="pagination"
                   @pagination="paginationChange"
                   :total="total">
        <div slot="options"
             slot-scope="scope">
          <el-button @click="openOptions(scope,'details')" style="margin-left: 4px;" class="button-blur">详情</el-button>
          <el-button @click="openOptions(scope,'edit')" style="margin-left: 4px;" class="button-green">编辑</el-button>
          <el-button @click="deleteDate(scope)" style="margin-left: 4px;" class="button-red">删除</el-button>
        </div>
      </CustomTable>
    </div>

    <el-dialog width="819px"
               center
               class="custom-dialog-fill font-table"
               title="活动审批"
               :visible.sync="dialog.open">

      <div class="dialog-title"
           slot="title">
        {{ dialog.title }}
      </div>

      <div class="d-f jc-c">

        <el-form :disabled=flag class="font-table" style="color: #000000;"ref="form" :model="form" label-width="75px">
          <!--<div class="mb-14">-->
            <!--基本信息-->
          <!--</div>-->
          <el-form-item>
            <div class="d-ib font-table" slot="label">姓名：</div>
            <el-input v-model="form.xm" style="width: 180px"></el-input>
            <div class="d-ib font-table"style="margin-left: 52px">曾用名：</div>
            <el-input v-model="form.cym" style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">国籍：</div>
            <el-select v-model="form.gjdm" style="width: 180px" placeholder="请选择国籍" filterable>
              <el-option label="" value="">--请选择国籍--</el-option>
              <el-option
                      v-for="item in optionsGj"
                      :key="item.value"
                      :label="item.content"
                      :value="item.id">
              </el-option>
            </el-select>
            <div class="d-ib font-table" style="margin-left: 67px">民族：</div>
            <el-select v-model="form.mzdm" style="width: 180px" placeholder="请选择民族" filterable>
              <el-option label="" value="">--请选择民族--</el-option>
              <el-option
                      v-for="item in optionsMz"
                      :key="item.value"
                      :label="item.content"
                      :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">证件代码：</div>
            <!--<el-input v-model="form.cyzjdm" style="width: 180px"></el-input>-->
            <el-select v-model="form.cyzjdm" style="width: 180px" placeholder="请选择证件类型">
              <el-option label="" value="">--请选择证件类型--</el-option>
              <el-option
                      v-for="item in optionsZjdm"
                      :key="item.value"
                      :label="item.content"
                      :value="item.id">
              </el-option>
            </el-select>
            <div class="d-ib font-table" style="margin-left: 40px">证件号码：</div>
            <el-input v-model="form.zjhm"style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">性别：</div>
            <!--<el-input v-model="form.xbdm" style="width: 180px"></el-input>-->
            <el-select v-model="form.xbdm" style="width: 180px"  placeholder="请选择性别">
              <el-option label="" value="">--请选择性别--</el-option>
              <el-option
                      v-for="item in optionsXb"
                      :key="item.value"
                      :label="item.content"
                      :value="item.id">
              </el-option>
            </el-select>
            <dipxv class="d-ib font-table" slot="" style="margin-left: 12px">重点人员编号：</dipxv>
            <el-input v-model="form.zdrybh" style="width: 180px"></el-input>

          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">职业：</div>
            <el-input v-model="form.zy" style="width: 180px"></el-input>
            <div class="d-ib font-table" style="margin-left: 40px">服务处所：</div>
            <el-input v-model="form.fwcs"style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" slot="label">地址名称：</div>
            <el-input v-model="form.dzmc" style="width: 180px"></el-input>
            <div class="d-ib font-table" style="margin-left: 40px">移动电话：</div>
            <el-input v-model="form.sfqkry"style="width: 180px"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">审查时间：</div>
            <el-date-picker type="datetime" placeholder="选择日期" v-model="form.scsj"
                            style="width: 180px" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            <!--<div class="d-ib font-table" style="margin-left: 40px">案件编号：</div>-->
            <!--<el-input v-model="form.ajbh"style="width: 180px"></el-input>-->
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table" style="margin-left: -19.5%">是否前科人员：</div>
            <el-radio v-model="form.sfqkry" label="0">是</el-radio>
            <el-radio v-model="form.sfqkry" label="1">否</el-radio>

            <div class="d-ib font-table" style="margin-left: 21.5%">是否在逃人员：</div>
            <el-radio v-model="form.sfztry" label="0">是</el-radio>
            <el-radio v-model="form.sfztry" label="1">否</el-radio>

          </el-form-item>

          <el-form-item>
            <div class="d-ib font-table" style="margin-left: -19.5%">是否极端分子：</div>
            <el-radio v-model="form.sfjdry" label="0">是</el-radio>
            <el-radio v-model="form.sfjdry" label="1">否</el-radio>
            <div class="d-ib font-table" style="margin-left: 21.5%">是否非访人员：</div>
            <el-radio v-model="form.sfffry" label="0">是</el-radio>
            <el-radio v-model="form.sfffry" label="1">否</el-radio>

          </el-form-item>

          <el-form-item>
            <div class="d-ib font-table" style="margin-left: -19.5%">是否涉恐人员：</div>
            <el-radio v-model="form.sfskry" label="0">是</el-radio>
            <el-radio v-model="form.sfskry" label="1">否</el-radio>
            <div class="d-ib font-table" style="margin-left: 21.5%">是否吸毒人员：</div>
            <el-radio v-model="form.sfxdry" label="0">是</el-radio>
            <el-radio v-model="form.sfxdry" label="1">否</el-radio>
          </el-form-item>

          <el-form-item>
            <div class="d-ib font-table" style="margin-left: -19.5%">是否精神病人：</div>
            <el-radio v-model="form.sfjsbr" label="0">是</el-radio>
            <el-radio v-model="form.sfjsbr" label="1">否</el-radio>
          </el-form-item>

          <el-form-item>
            <div v-show="flagupdate" class="d-ib font-table" slot="label">照片：</div>
            <el-upload
                    class="upload-demo"
                    action="http://127.0.0.1:8888/wh/dxhd-rybs/update"
                    :data="{ajbh:form.ajbh}"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handSuccess"
                    :before-upload="beforeAvatarUpload"
                    :file-list="fileList"
                    :limit=1
                    list-type="picture">
              <el-button size="small" type="primary" v-show="flagupdate">点击上传</el-button>
              <div slot="tip" class="el-upload__tip" v-show="flagupdate">只能上传jpg文件，且不超过2M</div>
            </el-upload>
          </el-form-item>
        </el-form>

      </div>
      <div class="d-f jc-c">
        <div v-if="dialog.type=='details'">
          <el-button
                  class="button-cancel"
                  @click="dialog.open = false">关  闭
          </el-button>
        </div>
        <div v-if="dialog.type=='add'">
          <el-button
                  class="button-cancel"
                  @click="cancel()">取 消
          </el-button>
          <el-button
                  class="button-submit mr58"
                  @click="add()">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='edit'">
          <el-button
                  class="button-cancel"
                  @click="cancel()">取 消
          </el-button>
          <el-button
                  class="button-submit mr58"
                  @click="edit()">确 定
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    import Title from "../../../components/Title";
    import CustomTable from "../../../components/CustomTable";
    export default {
        name: "rybss",
        components: { Title, CustomTable },
        data () {
            return {
                optionsXb:{},
                optionsZjdm:{},
                optionsMz:{},
                optionsGj:{},
                flagupdate:true,
                flag:false,
                fileList: [],
                total: 0,
                pagination: {},

                dialog: {
                    title: '新增方案',
                    open: false,
                    type: 'add',//'edit','add','details'
                },
                form: {
                    xm: '',
                    zjhm: '333'
                },
                tableData: [

                ],
                columns: [
                    {
                        key: 'xm',
                        label: '姓名'
                    },
                    {
                        key: 'zjhm',
                        width: '180px',
                        label: '身份证号'
                    },
                    // {
                    //     key: 'gjdm',
                    //     label: '国籍'
                    // },
                    // {
                    //     key: 'mzdm',
                    //     label: '民族'
                    // },
                    // {
                    //     key: 'xbdm',
                    //     label: '性别',
                    //     formatter : this.stateFormat
                    // },
                    {
                        key: 'zy',
                        label: '职业'
                    },
                    {
                        key: 'dzmc',
                        label: '地址名称'
                    },
                    {
                        key: 'scsj',
                        label: '审查时间',
                        width:'200px'
                    },

                    {
                        key: 'options',
                        label: '操作',
                        width: '240px',
                        slot: true
                    }
                ],
            }
        },
        mounted () {
            this.selectData();
        },
        methods: {

            selectData() {
                let optionsXb = new Array();
                let optionsZjdm = new Array();
                let optionsMz = new Array();
                let optionsGj = new Array();
                this.axios.post('t-dictionary/selectList', null
                ).then((res) => {
                    if(res.code == '1'){
                    for (var obj in res.data) {
                        if(res.data[obj].type == 'XB'){
                            optionsXb.push(res.data[obj]);
                        }
                        if(res.data[obj].type == 'ZJDM'){
                            optionsZjdm.push(res.data[obj]);
                        }
                        if(res.data[obj].type == 'MZ'){
                            optionsMz.push(res.data[obj]);
                        }
                        if(res.data[obj].type == 'GJ'){
                            optionsGj.push(res.data[obj]);
                        }
                    }
                    this.optionsXb = optionsXb;
                    this.optionsZjdm = optionsZjdm;
                    this.optionsMz = optionsMz;
                    this.optionsGj = optionsGj;
                }
            }).catch((error) => {
                    this.$message({
                    message: '数据查询失败！'+error,
                    type: 'error',
                });
            });
            },
            handSuccess(response, file, fileList){
              console.log(response,file,fileList);
                this.form.ajbh=response.data;

              console.log(">>>>>>>>>>>>>"+this.form.ajbh)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                this.remove();
            },
            handlePreview(file) {
                console.log(file);
            },
            paginationChange (e) {
                this.pagination = e;
                this.getList(this.pagination.pageNum, this.pagination.pageSize);
            },
            getList (page, limit) {
                this.axios.post('/dxhd-rybs/selectPage', {
                    current: page,
                    size: limit,
                    entity: {
                        xm: this.form.xms || '',
                        zjhm: this.form.zjhms || ''
                    }

                }).then((res) => {
                    //列表
                    this.tableData = res.data.records;
                this.total = res.data.total;
            }).catch((error) => {
                    console.log(error);
            });
            },
            onSubmit () {
                this.getList(this.pagination.pageNum, this.pagination.pageSize);
            },

            openOptions (scope,params) {
                console.info(scope);
                this.dialog.type = params
                if (params == 'add') {
                    this.flag=false;
                    this.dialog.title = '新增'
                    this.flagupdate=true;
                    this.form={};
                    this.fileList=[]
                }
                if (params == 'edit') {
                    this.flag=false;
                    this.fileList=[{}];
                    this.dialog.title = '编辑';
                    this.flagupdate=true;
                    this.form=scope.data;
                    this.fileList=[{}];
                    if(scope.data.zpDz==null){
                        this.fileList=[];
                    }else{
                        this.fileList=[{}];
                        this.fileList[0].url=scope.data.zpDz;
                    }
                }
                if (params == 'details') {
                    this.flag=true;
                    this.fileList=[{}];
                    this.dialog.title = '详情';
                    this.flagupdate=false;
                    this.form=scope.data;
                    if(scope.data.zpDz==null){
                        this.fileList=[];
                    }else{
                        this.fileList=[{}];
                        this.fileList[0].url=scope.data.zpDz;
                    }
                }
                this.dialog.open = true
            },



            //根据id删除
            getDetail(id) {
                this.axios.post('/dxhd-rybs/removeById', {
                    ajbh: id || 4588988
                }).then((res) => {
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.onSubmit();
            }).catch((error) => {
                    this.$message({
                    type: 'info',
                    message: '删除失败'
                });
            });
            },

            add(){
                var ajbh =this.form.ajbh;
                var url ='/dxhd-rybs/save';
                if(ajbh!=null && ajbh!=''){
                    url= '/dxhd-rybs/updateById';
                }
                this.axios.post(url, this.form).then((res) => {
                    this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
                this.dialog.open = false
                this.onSubmit();
            }).catch((error) => {
                    this.$message({
                    type: 'info',
                    message: '保存失败'
                });
            });
            },

            edit(){
                this.axios.post('/dxhd-rybs/updateById', this.form).then((res) => {
                    this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
                this.dialog.open = false
                this.onSubmit();
            }).catch((error) => {
                    this.$message({
                    type: 'info',
                    message: '保存失败'
                });
            });
            },
            remove(){
                this.axios.post('/dxhd-rybs/handleRemove', {
                    ajbh:this.form.ajbh
                }).then((res) => {
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
             //   this.dialog.open = false

            }).catch((error) => {
                    this.$message({
                    type: 'info',
                    message: '删除失败'
                });
            });
            },

            deleteDate(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '关闭',
                    type: ''
                }).then(() => {
                    this.getDetail(row.data.ajbh);
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            },
            cancel(){
                this.onSubmit();
                this.fileList=[];
                this.dialog.open = false;

            }


        }
    }
</script>

<style lang="scss">
  .hdda-box {
    .mb-14 {
      margin-bottom: 14px;
    }

    .mr111 {
      margin-right: 111px;
    }

    .mr58 {
      margin-right: 58px;
    }
    .input {
      width: 205px !important;
    }
  }
</style>



